<template>
    <div>
        
        <a-card :bordered="false">
            <a-steps :current="current">
                
                <a-step v-for="(item,index) in stepsList"
                        :title="item.title"
                        :key="index"
                        @click="handelStepsClick(index)">
                    <a-icon :type="item.icon" slot="icon"/>
                </a-step>
            </a-steps>
            <!--            <a-steps :current="current" >-->
            
            <!--              <a-step  title="项目立项"-->
            <!--                       @click="changeUrl('/Project/ProjectDetail/ProjectApproval',0)">-->
            
            <!--                <a-icon type="project" slot="icon"/>-->
            
            <!--              </a-step>-->
            <!--              <a-step title="项目用地" @click="changeUrl('/Project/ProjectDetail/ProjectLand',1)">-->
            
            <!--                <a-icon type="heat-map"  slot="icon"/>-->
            <!--              </a-step>-->
            <!--              <a-step title="开发规划" @click="changeUrl('/Project/ProjectDetail/DevelopmentPlans',2)">-->
            <!--                <a-icon type="flag"  slot="icon"/>-->
            <!--              </a-step>-->
            <!--              <a-step  title="招商合作" @click="changeUrl('/Project/ProjectDetail/Merchants',3)">-->
            <!--                <a-icon type="solution" slot="icon"/>-->
            <!--              </a-step>-->
            <!--              <a-step  title="开发进度" @click="changeUrl('/Project/ProjectDetail/ProjectProgress',4)">-->
            <!--                <a-icon type="schedule" slot="icon"/>-->
            <!--              </a-step>-->
            <!--              <a-step  title="收入"  @click="changeUrl('/Project/ProjectDetail/moneyIncome',5)">-->
            <!--                <a-icon type="money-collect" slot="icon"/>-->
            <!--              </a-step>-->
            <!--              -->
            <!--            </a-steps>-->
            <a-divider style="margin-bottom: 10px"/>
            
            <route-view></route-view>
        
        </a-card>
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import indexedDB from '@/db/db'
    import RouteView from "@/components/layouts/RouteView"

    export default {
        name: "AddProject",
        components: {
            RouteView,
        },
        data() {
            return {
                stepsList: [{
                    title: '项目立项',
                    icon: 'project',
                }, {
                    title: '项目用地',
                    icon: 'heat-map',
                }, {
                    title: '开发规划',
                    icon: 'flag',
                }, {
                    title: '招商合作',
                    icon: 'solution',
                }, {
                    title: '开发进度',
                    icon: 'schedule',
                }, {
                    title: '收入',
                    icon: 'collect',
                }],
            }
        },
        computed: {
            current() {
                return this.$store.state.app.current
            },
        },
        mounted() {
            let current = parseInt(this.$route.query.current)
            this.$store.dispatch("setCurrent", current)
        },
        methods: {
            handelStepsClick(index) {
                console.log(index)
                this.$store.dispatch("setCurrent", index)
                let routerPath = [
                    '/Project/ProjectDetail/ProjectApproval/',
                    '/Project/ProjectDetail/ProjectLand/',
                    '/Project/ProjectDetail/DevelopmentPlans/',
                    '/Project/ProjectDetail/Merchants/',
                    '/Project/ProjectDetail/ProjectProgress/',
                    '/Project/ProjectDetail/moneyIncome/',
                ]
                let id = this.$route.query.objId
                this.$router.push({
                    path:routerPath[index],
                    query:{
                        objId:id,
                        current:index
                    }
                })
            },
            
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
    
    .title {
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin: 16px 0;
    }
</style>